<template>
  <div class="page-article l-main">
    <div class="container">
      <h1 class="article-title">{{ article.title }}</h1>
      <div class="article-info">
        <span class="time">{{ article.createTime | dateFormat }}</span>
        <div class="tag-list inline" v-for="tagItem in article.tags" :key="tagItem.id">
          <NuxtLink :to="'/tag/' + tagItem.id">{{ tagItem.name }}</NuxtLink>
        </div>
      </div>
      <articleContent :content="article.originalContent" />
    </div>
  </div>
</template>

<script>
export default {
  async asyncData({ params, $client }) {
    let article;
    const articleId = params.id;
    try {
      const result = await $client.post.get(articleId);
      const { data } = result;
      article = data;
    } catch (err) {
      console.log(err);
    }
    return {
      article,
    };
  },
};
</script>
